<template>
    <div class="main_container">
        <Modal v-model="active" title="创建漏洞扫描记录" @on-ok="handleSubmit">
            <Form :label-width="100" v-model="newData" :label-colon="true">
                <FormItem label="关联任务">
                    <Select v-model="newData.myTaskId">
                        <Option v-for="(value, key) in IdNameMap" :value="key" :key="key">{{ value }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="利用漏洞编号">
                    <Select v-model="newData.exploitVul">
                        <Option v-for="vulNo in VulNos[newData.myTaskId]" :value="vulNo" :key="vulNo">
                            {{ vulNo }}
                        </Option>
                    </Select>
                </FormItem>
                <FormItem label="漏洞扫描名称">
                    <Input v-model="newData.exploitName" />
                </FormItem>
                <FormItem label="目标Ip">
                    <Input v-model="newData.targetIp" />
                </FormItem>
                <FormItem label="扫描结果">
                    <Input v-model="newData.exploitResult" />
                </FormItem>
            </Form>
        </Modal>
        <Row>
            <Col span="4" offset="20" class-name="button_container">
            <Button type="success" shape="circle" size="large" @click="handleCreate">新建漏洞扫描</Button>
            </Col>
        </Row>
        <div class="list_container">
            <Collapse v-model="value">
                <Panel v-for="(exploitList, key) in exploitData" :name="key">
                    {{ IdNameMap[key] }}
                    <template #content>
                        <div v-for="exploit in exploitList">
                            <Row class-name="show_div">
                                <Col span="4" class-name="col_div">
                                漏洞扫描名：{{ exploit.exploitName }}
                                </Col>
                                <Divider type="vertical" />
                                <Col span="4" class-name="col_div">
                                测试员：{{ username }}
                                </Col>
                                <Divider type="vertical" />
                                <Col span="4" class-name="col_div">
                                利用漏洞编号：{{ exploit.exploitVul }}
                                </Col>
                                <Divider type="vertical" />
                                <Col span="4" class-name="col_div">
                                扫描时间：{{ exploit.exploitTime }}
                                </Col>
                                <Divider type="vertical" />
                                <Col span="4" class-name="col_div">
                                目标ip：{{ exploit.targetIp }}
                                </Col>
                                <Divider type="vertical" />
                                <Col span="8" class-name="col_div">
                                扫描结果：{{ exploit.exploitResult }}
                                </Col>
                            </Row>
                            <Divider v-show="exploit != exploitList[exploitList.length - 1]" />
                        </div>
                    </template>
                </Panel>
            </Collapse>
        </div>
    </div>
</template>
<script>
export default {
    name: "Exploit",
    data() {
        return {
            exploitData: {},//所有数据
            value: null,
            newData: {},//新增数据
            VulNos: {},//漏洞编号队列
            IdNameMap: {},//存储该用户mytaskid与任务之间的映射
            username: "",
            active: false,
        };
    },
    methods: {
        renew() {
            this.$api.get("tester/exploit/list").then((res) => {
                var listData = res.data.data;
                var result = {};
                for (var k in this.IdNameMap) result[k] = [];//设置空队列
                for (var i in listData) result[listData[i].myTaskId].push(listData[i]);
                console.log(result);
                this.exploitData = result;
            })
        },
        handleCreate() {
            this.active = true;
            this.newData = {};
        },
        handleSubmit() {
            this.$api.post("tester/exploit/create", this.newData).then((res) => {
                this.$Notice.info({
                    title: "确认框",
                    desc: res.msg,
                });
                this.renew();
            });
        }
    },
    created() {
        this.username = sessionStorage.getItem("username");
        this.$api.get("tester/scan/vul/list").then((res) => {
            this.VulNos = res.data.data;
            console.log("VulNos: ")
            console.log(this.VulNos);
            this.$api.get("tester/task/map").then((res) => {
                this.IdNameMap = res.data.data;
                this.value = [];
                for (var i in this.IdNameMap) this.value.push(i);
                this.renew();
                console.log(this.VulNos);
                console.log(this.IdNameMap);
                console.log(this.exploitData);
            })
        })
    },
}
</script>
<style scoped>
.main_container {
    width: 90%;
    height: 98%;
    border-radius: 10px;
    padding: 10px;
    border: solid;
    margin: auto;
    margin-top: 20px;
}

.button_container {
    padding: 15px 5px;
}

.show_div {
    width: auto;
    padding: 10px;
    border: solid;
    border-radius: 20px;
}

.col_div {
    height: 40px;
    padding: 10px;
}
.list_container{
    height: 500px;
    overflow: auto;
}
</style>